import Link from "next/link"
import { Card, CardContent, CardHeader } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"

interface BlogPostCardProps {
  title: string
  excerpt: string
  date: string
  readTime: string
  category: string
  slug: string
  tags: string[]
  image?: string
}

export function BlogPostCard({ title, excerpt, date, readTime, category, slug, tags, image }: BlogPostCardProps) {
  return (
    <Card className="group hover:shadow-lg transition-all duration-300 overflow-hidden">
      <Link href={`/blog/${encodeURIComponent(slug)}`}>
        <div className="aspect-video bg-muted overflow-hidden">
          <img
            src={image || `/placeholder.svg?height=240&width=400&query=${encodeURIComponent(title)}`}
            alt={title}
            className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
          />
        </div>

        <CardHeader className="pb-3">
          <div className="flex items-center justify-between text-sm text-muted-foreground mb-2">
            <Badge variant="secondary" className="text-xs">
              {category}
            </Badge>
            <span>
              {date} • {readTime}
            </span>
          </div>
          <h3 className="text-xl font-bold text-balance group-hover:text-primary transition-colors">{title}</h3>
        </CardHeader>

        <CardContent className="pt-0">
          <p className="text-muted-foreground leading-relaxed text-pretty mb-4">{excerpt}</p>

          <div className="flex flex-wrap gap-1">
            {tags.slice(0, 3).map((tag) => (
              <span
                key={tag}
                className="px-2 py-1 text-xs bg-gray-100 text-gray-600 rounded-md dark:bg-gray-800 dark:text-gray-400"
              >
                {tag}
              </span>
            ))}
            {tags.length > 3 && <span className="px-2 py-1 text-xs text-gray-500">+{tags.length - 3}</span>}
          </div>
        </CardContent>
      </Link>
    </Card>
  )
}
